<template>
    <div>
        <NavView></NavView>
        <div id="ContentBox" ref="ContentBox">
            <div id="HeaderBar" :style="{'right' :105 - width + '%'}">
                <div class="HeaderBar-button" @click="RUN"><Icon type="md-radio-button-on" /> 运行</div>
                <div class="HeaderBar-button" @click="RESET(id)"><Icon type="md-refresh" /> 重置</div>
            </div>
            <div id="Editor" :style="{'width' : width + '%'}">
                <Editor ref="Editor"></Editor>
            </div>
            <div id="Runing" :style="{'width' : 100 - width + '%'}">
                <Runing :code="code" ref="Runing"></Runing>
            </div>
            <div id="MoveBar" :style="{'left' : width+ '%'}" @mousedown="mousedown($event)"></div>
            <div class="markView" v-if="showMark"></div>
        </div>
    </div>
</template>

<script>
import Editor from '../../components/Editor.vue'
import Runing from './Runing.vue'
import NavView from '../../components/UI/Nav.vue'
// import VueCodes from '../../Codes/vue'

export default {
    components: {
        NavView,
        Editor,
        Runing,
    },
    props: ['id'],
    data() {
        return {
            width: 40,
            code: '',
            showMark: false,
        }
    },
    watch: {
        id: {
            handler(newValue) {
                this.RESET(newValue)
            },
            immediate: true,
        },
    },
    methods: {
        mousedown() {
            document.body.style.cursor = 'col-resize';
            this.showMark = true;
            // document.body.style.userSelect = 'none';
            document.onmousemove = (event) => {
                var BodyWidth = this.$refs.ContentBox.clientWidth;
                var AllWidth = document.body.clientWidth;
                let left = (event.clientX - (AllWidth - BodyWidth)) / BodyWidth * 100;
                if (left > 80) {
                    left = 80
                } else if (left < 20) {
                    left = 20
                }
                this.width = left;
            };
            document.onmouseup = () => {
                this.showMark = false;
                document.body.style.cursor = '';
                document.onmousemove = null;
                document.onmouseup = null;
            }
        },
        RUN() {
            this.code = this.$refs.Editor.getCode();
            this.$refs.Runing.destroyCode();
            this.$nextTick(() => {
                this.$refs.Runing.renderCode();
            });
        },
        readFile(url) {
            let xhr = new XMLHttpRequest();
            xhr.open('GET', url, false);
            xhr.overrideMimeType("text/html;charset-utf8");
            xhr.send(null);
            return xhr.status === 200 ? xhr.responseText : null;
        },
        RESET(id) {
            // var Codes = VueCodes[id] || '';
            var Codes = this.readFile('./Codes/vue/' + id + '.vue');
            this.code = Codes;
            this.$nextTick(() => {
                this.$refs.Runing.destroyCode();
                this.$refs.Editor.setCode(this.code);
                this.$nextTick(() => {
                    this.$refs.Runing.renderCode();
                });
            });
        },
    }
}
</script>